<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>头像修改</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: black;
            text-align: center;
        }

        #crop_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
        }

        button{
            appearance: none;
            -webkit-appearance: none;
            border: 0;
            background: none;
        }

        #crop_circle_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
            display: inline-block;
            margin-left: 20px;
        }

        #crop_circle_btn:active,#crop_btn:active{
            background-color: #6854e4;
        }
    </style>
</head>
<body>
     <img src="./asset/test.png" style="display: none;">
    <div id="crop_result" style="text-align: center;width: 100%; padding-top: 30px; height: 400px; line-height: 400px;"><span><img id="headimg" style="display: block;margin: 0 auto" src="" alt="" /></span></div>
    <button class="btn" id="crop_btn">更换头像</button>
    <script src="./asset/transform.js"></script>
    <script src="./asset/alloy-finger.js"></script>
    <script src="alloy-crop.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script>
var imageapi=JSON.parse(localStorage.image);
var headimg= document.getElementById('headimg');
headimg.src=imageapi.src || '';
var maxwh=imageapi.maxwh || 500;//压缩后最长端像素;
var ratio=imageapi.ratio || 0.9;//压缩质量0-1;
var _type =imageapi.type || "image/jpeg";//图片压缩类型
mui.plusReady(function(){
	document.getElementById("crop_btn").addEventListener('tap', function() {
        	openImg(headimg);//点击头像的时候触发          
            });
	openImg(headimg);
function openImg(thisid){
	if (mui.os.plus) {  
        var a = [{  
            title: "拍照"  
        }, {  
            title: "从手机相册选择"  
        }];  
        plus.nativeUI.actionSheet({  
            title: "修改用户头像",  
            cancel: "取消",  
            buttons: a  
        }, function(a) { /*actionSheet 按钮点击事件*/  
            switch (a.index) {  
                case 0:mui.back();break;
                case 1:getImage();break; /*拍照*/  
                case 2:appendByGallery();/*打开相册*/  
            }  
        })  
    }
};
    	// 拍照添加文件
function getImage() {
    var cmr = plus.camera.getCamera(); 
    cmr.captureImage( function ( p ) {     
	plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
  	var localurl = entry.toLocalURL();//把拍照的目录路径，变成本地url路径，例如file:///........之类的。
  	appendFile(localurl);
    });   
},function( error ) {
        alert( "Capture image failed: "+error.message );
    }  
);   
} 
// 从相册添加文件 
function appendByGallery(){
    plus.gallery.pick(function(path){
	appendFile(path);//处理图片的地方
    });
}

function checkImg(img_pach){
	if(img_pach.indexOf("/")>0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
{
    img_pach=img_pach.substring(img_pach.lastIndexOf("/")+1,img_pach.length);
}
var index= img_pach.indexOf("."); //得到"."在第几位
var img_type=img_pach.substring(index+1); //截断"."之前的，得到后缀
return img_type;
}

// 添加文件
//var f1=null;
function appendFile(path){
headimg.style.display='none';//关闭头像显示
	var imgtype=checkImg(path);//获得文件后缀
	if(imgtype==="jpeg" || imgtype==="jpg" || imgtype==="bmp" || imgtype==="png"){//判断格式是否符合//
		if(imgtype === "jpg" || imgtype === "jpeg"){//判断图片类型
		imgtype='jpeg';
		}else{
			imgtype ="jpeg";//压缩只支持jpeg 所以这里png和别的格式的我也改成了jpeg
		}
		var img=new Image();
		img.src=path;
		img.onload=function(){
			var base64=compress(img);
			upload(base64);//返回处理后的图片
		}
}else{
alert("格式不正确,请上传gif/jpeg/jpg/png/格式图片");
return false;	
}
}
});
/*
 * 图片压缩
 * img    原始图片
 * maxwh   压缩后的宽高最长边
 * ratio   压缩比率 
 */
function compress(img_url) {
//	alert(img_url.width);
	var _type=_type || "image/jpeg";
    var width = img_url.width,
     	height = img_url.height,
     	scale = width / height; 
     	if(height>maxwh || width>maxwh){
           if(width>=height){
            width=maxwh;
            height=width/scale;
           }else{
            height=maxwh;
            width=scale*height;
           }
       }
var canvas, ctx, base64;
   	canvas = document.createElement('canvas');   
 	canvas.width = width;
   	canvas.height = height;
   	ctx = canvas.getContext("2d");
   	ctx.fillStyle = '#fff';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
   	ctx.drawImage(img_url, 0, 0, width, height);
   	base64 = canvas.toDataURL(_type, ratio);
   	return base64;
 }
// 返回数据
function upload(base64){
		mui.back();
		var list = plus.webview.currentWebview().opener();
//	触发父页面的自定义事件(renovate),从而返回父页面更新,并且传递参数新图片值和id值
				mui.fire(list, 'renovate',{image:base64});
				//返回true,继续页面关闭逻辑
				return true;

}
    </script>

</body>
</html>
